<template>
  <div>
    <!-- 
      v-model修饰符
      作用：使v-model拥有更加强大的功能
      .number修饰符 ： 以parseFloat的形式转成数字类型
      .trim     去除首尾空白字符
      .lazy     在change时触发而非input时触发(视图更新-表单元素失去焦点的时候才同步数据给变量)
      
     -->
    <div>年龄：<input type="number" v-model.number="age" /></div>
    <div>自我介绍：<input type="text" v-model.trim="intro" /></div>
    <div>座右铭：<input type="text" v-model.lazy="motto" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      intro: "",
      motto: "",
    };
  },
};
</script>

<style>
</style>